<template>
	<layout header-title="代请假">
		<y-form radius="radius" :keys="columns" v-model="info" @change="change" @submit="submit">
			<template #startTime="{keys:{key}}">
				<datetime-picker style="flex:1;" defaultValue="" placeholder="请选择" fields="minute" @change="dateChange($event,key)" />
			</template>
			<template #endTime="{keys:{key}}">
				<datetime-picker style="flex:1;" defaultValue="" placeholder="请选择" fields="minute" @change="dateChange($event,key)" />
			</template>
		</y-form>
	</layout>
</template>

<script>
	import layout from "@/pages/components/forms/layout/layout.vue";
	import yForm from "@/y-ui/y-form/y-form.vue";
	import yButton from "@/y-ui/y-button/y-button.vue";
	export default {
		components: {
			layout,
			yForm
		},
		data() {
			return {
				info: {},
				range: [{
					name: "老张",
					value:"2"
				}, {
					name: "老里",
					value:"3"
				}]
			};
		},
		computed: {
			columns() {
				return [{
					// type: 'yPicker',
					type: 'yInput',
					key: 'remark1',
					lable: '请假学生：',
					disabled:true,
					placeholder:"请选择",
					form_render:(h,obj,{upData})=>{
						return this.opt(h,{},e=>{
							this.$BusEvent.$on('selectStudents',e=>{
								upData({
									remark1:e.name
								});
							});
							uni.navigateTo({
								url:'./search_student'
							});
						});
					},
					// rangeKey: "name",
					// valueKey: "value",
					// range: this.range,
					rules: {
						rule: ['required'],
						msg: ['请选择']
					}
				}, {
					type: 'yTextarea',
					key: 'remark',
					lable: '事由：',
					rules: {
						rule: ['required'],
						msg: ['请填写']
					}
				}, {
					key: 'startTime',
					lable: '开始时间：',
					slot: "startTime",
					rules: {
						rule: ['required'],
						msg: ['请选择']
					}
				}, {
					key: 'endTime',
					lable: '结束时间：',
					slot: "endTime",
					rules: {
						rule: ['required'],
						msg: ['请选择']
					}
				}, {
					hide: !this.info.daysOff,
					type: 'yInput',
					lable: `请假天数：`,
					key: 'daysOff',
					disabled: true,
					hideClear: true,
					unit: '天'
				}];
			}
		},
		methods: {
			/**
			 * 选择按钮
			 */
			opt(h, obj, click = function() {}) {
				return h(yButton, {
					props: {
						size: 'small'
					},
					style: {
						marginLeft: "1em"
					},
					on: {
						click
					}
				}, "选择");
			},
			submit(e) {
				this.change(this.info);
			},
			dateChange({
				f3
			}, key) {
				this.$set(this.info, key, f3);
				this.change(this.info);
			},
			change(e) {
				//计算请假天数
				if (e.endTime && e.startTime) {
					const time = new Date(e.endTime) - new Date(e.startTime);
					if (time < 0) {
						uni.showToast({
							title: '结束时间不能小于开始时间',
							duration: 2000,
							icon: "none"
						});
					} else {
						this.$set(this.info, 'daysOff', Math.round(time / (24 * 3600 * 1000), 2));
					}
				}
			}
		}
	};
</script>
